<template>
  <div id="app_id">
    <div class="top">
      <Top>召唤师</Top>
    </div>
    <div class="contioner">
      <div class="left">
        <Left></Left>
      </div>
      <div class="right">
        <div class="content">
            <router-view name="default"></router-view>
            <router-view name="oth"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import Top from '../components/Top.vue'
import Left from '../components/Left.vue'

export default {
  name: "App",
  components: {
    Top,
    Left
  },
  methods: {
  },
  data() {
    return {
      page: "Index"
    }
  },
  
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
.top {
  width: 100%;
  height: 54px;
  background-color: #22b14c;
}
.contioner {
  width: 100%;
  background-color: #efe4b0;
}
.contioner > div {
  float: left;
}
.left {
  width: 300px;
  height: calc(100vh - 54px);
  background-color: #ff7f27;
}
.right {
  width: calc(100% - 300px);

  height: calc(100vh - 54px);
}
.content {
  background-color: #b97a57;
  height: 500px;
  width: 1000px;
  margin: 60px 100px;
}
h2 {
  text-align: center;
}
</style>
